// js代码
// 增删改查
// 获取学生数据,并渲染到表格中
async function renderStudent() {
  const { data: res } = await axios.get("/students");
  // console.log(res);
  let arr = res.data.map((item) => {
    return `  <tr>
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender === 0 ? "男" : "女"}</td>
    <td>第${item.group}组</td>
    <td>${item.hope_salary}</td>
    <td>${item.salary}</td>
    <td>${item.province}${item.city}${item.area}</td>
    <td>
      <a href="javascript:;" class="text-success mr-3"><i data-id='${
        item.id
      }' class="bi bi-pen"></i></a>
      <a href="javascript:;" class="text-danger"><i data-id='${
        item.id
      }' class="bi bi-trash"></i></a>
    </td>
  </tr>`;
  });
  document.querySelector("tbody").innerHTML = arr.join("");
}
renderStudent();

// 添加操作,需要提前准备,比如模态框,省市县联动
// bootstrap模态框方法 实例化 调用方法显示隐藏
let addModal = new bootstrap.Modal(document.querySelector("#modal"));
// addModal.show() 模态框显示
// addModal.hide() 模态框隐藏
document.querySelector("#openModal").addEventListener("click", function () {
  // 修改模态框标题
  document.querySelector("#modal h5").innerText = "添加学员";
  // 重置表单
  document.querySelector("#form").reset();
  addModal.show();
});

// 完成省市县联动
async function initCity() {
  let province = document.querySelector("[name=province]");
  let city = document.querySelector("[name=city]");
  let area = document.querySelector("[name=area]");
  // 1. 马上获取全部的省,渲染到第一个下拉框
  const { data: res } = await axios.get("/api/province");
  // console.log(res);
  let arr = res.data.map((item) => {
    return `<option value="${item}">${item}</option>`;
  });
  province.innerHTML = '<option value="">--省份--</option>' + arr.join("");
  // 2. 切换省的时候,获取对应的市,渲染到第二个下拉框
  province.addEventListener("change", async function () {
    // 重置县(地区)
    area.innerHTML = '<option value="">--地区--</option>';

    let pname = this.value;
    // 判断省是否为空
    if (pname === "") {
      return (city.innerHTML = '<option value="">--城市--</option>');
    }
    const { data: res } = await axios.get("/api/city", { params: { pname } });
    // console.log(res);
    let arr = res.data.map((item) => {
      return `<option value="${item}">${item}</option>`;
    });
    city.innerHTML = '<option value="">--城市--</option>' + arr.join("");
  });
  // 3. 切换市的时候,获取对应的县,渲染到第三个下拉框
  city.addEventListener("change", async function () {
    let pname = province.value;
    let cname = this.value;
    if (cname === "") {
      return (area.innerHTML = '<option value="">--地区--</option>');
    }
    const { data: res } = await axios.get("/api/area", {
      params: { cname, pname },
    });
    // console.log(res);
    let arr = res.data.map((item) => {
      return `<option value="${item}">${item}</option>`;
    });
    area.innerHTML = '<option value="">--地区--</option>' + arr.join("");
  });
}
initCity();

// 点击确认 完成添加学生
document.querySelector("#submit").addEventListener("click", async function (e) {
  e.preventDefault();
  let data = val(document.querySelector("#form"));
  // 数据类型转换,字符串转换为数字
  data.age = Number(data.age);
  data.gender = +data.gender;
  data.group = +data.group;
  data.hope_salary = +data.hope_salary;
  data.salary = +data.salary;
  // console.log(data);

  // 判断,点击的是添加还是修改
  let title = document.querySelector("#modal h5").innerText;
  if (title === "添加学员") {
    // ajax提交
    try {
      const { data: res } = await axios.post("/students", data);
      // 提示成功的信息
      message.success(res.message);
      // 更新页面数据
      renderStudent();
      // 关闭弹层
      addModal.hide();
    } catch (e) {
      message.error("添加失败");
    }
  } else if (title === "修改学员") {
    // 点击确定,修改学生
    // ajax提交
    try {
      let id = document.querySelector("#modal h5").dataset.id;
      const { data: res } = await axios.put(`/students/${id}`, data);
      // console.log(res);
      message.success("修改成功");
      renderStudent();
      addModal.hide();
    } catch (e) {
      message.error("修改失败");
    }
  }
});

//删除学生 事件委托
document.querySelector("tbody").addEventListener("click", async function (e) {
  // 判断点击的是否是删除
  if (e.target.classList.contains("bi-trash")) {
    let id = e.target.dataset.id;
    // console.log("删除", id);

    // 敏感操作 添加提示
    if (!confirm("确定要删除吗?")) return;
    // ajax提交
    try {
      const { data: res } = await axios.delete(`/students/${id}`);
      message.success("删除成功");
      // 重新渲染页面
      renderStudent();
    } catch (e) {
      message.error("删除失败");
    }
  }
  // 判断点击的是否是修改
  if (e.target.classList.contains("bi-pen")) {
    let id = e.target.dataset.id;
    // console.log("编辑", id);
    // 修改模态框标题
    document.querySelector("#modal h5").innerText = "修改学员";
    document.querySelector("#modal h5").setAttribute("data-id", id);
    addModal.show();
    // 数据回填 首先获取数据,根据id发送请求
    const { data: res } = await axios.get(`/students/${id}`);
    // console.log(res);
    // 获取市 县取出,渲染到下拉框
    let p1 = axios.get("/api/city", { params: { pname: res.data.province } });
    let p2 = axios.get("/api/area", {
      params: { pname: res.data.province, cname: res.data.city },
    });
    const [
      {
        data: { data: c },
      },
      {
        data: { data: a },
      },
    ] = await Promise.all([p1, p2]);
    // console.log(c);
    // console.log(a);
    let arr2 = c.map((item) => `<option value="${item}">${item}</option>`);
    document.querySelector("[name=city]").innerHTML =
      '<option value="">--城市--</option>' + arr2.join("");
    let arr3 = a.map((item) => `<option value="${item}">${item}</option>`);
    document.querySelector("[name=area]").innerHTML =
      '<option value="">--地区--</option>' + arr3.join("");
    // 插件实现数据回填
    // val(表单,数据)
    val(document.querySelector("#form"), res.data);
  }
});
